<template>
  <div class="account-container">
    <SectionTitle title="收款账户" style="margin: 8px 0 16px">
      <span class="title-tip">小提示：推荐使用工资卡哦~</span>
    </SectionTitle>
    <dynamicEditTable
      v-if="flag"
      ref="dynamicEditTableRef"
      v-model="accountInfo"
      :list-data="setLogText(accountInfo)"
      :list-setting="listSetting"
      :is-edit="isEdit"
      :show-delete-btn="false"
      :show-serial="false"
      :show-add-btn="false"
      :show-copy-btn="false"
      @createNewItem="addNewBank"
      @autocompleteDelFn="autocompleteDelFn"
      @fetchAutocomplete="fetchAutocomplete"
      @autocompleteSelect="autocompleteSelect" />
  </div>
</template>

<script>
// components
import SectionTitle from '@/components/Title';
import dynamicEditTable from '@/components/Common/dynamicEditTable';
import { mapState } from 'vuex';
// mixins
import accountTable from '@/mixins/accountTable';
import accountBackfill from '@/mixins/accountBackfill';
export default {
  components: { SectionTitle, dynamicEditTable },
  mixins: [accountTable, accountBackfill],
  props: {
    isEdit: {
      type: Boolean,
      default: true
    },
    isCreate: {
      type: Boolean,
      default: true
    },
    isCompleted: { // 审批是否完成
      type: Boolean,
      default: false
    },
    logTextHeader: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      accountInfo: [{
        payName: '',
        payNum: '',
        bank: '',
        province: '',
        subBank: ''
      }],
      historyAccountType: 0 // 收款账户类型 0个人 1供应商，用于区分数据来源
    };
  },
  computed: {
    ...mapState({
      'userInfo': state => state.user.userInfo
    }),
    listSetting() {
      const isCompleted = this.isCompleted;
      return [
        {
          label: '收款户名',
          type: 'autocomplete',
          width: '100px',
          isRequired: true,
          keyword: 'payName',
          maxlength: 50,
          canDelBtn: true,
          placeholder: '请输入姓名',
          queryName: 'queryString'
        },
        {
          label: '收款账号',
          type: 'inputText',
          showType: isCompleted ? 'secret' : '',
          width: '185px',
          isRequired: true,
          keyword: 'payNum',
          maxlength: 50,
          placeholder: '请输入银行卡号'
        },
        {
          label: '银行',
          type: 'select',
          keyName: 'value',
          isRequired: true,
          keyword: 'bank',
          tip: this.isEdit ? '输入系统中未添加的银行名称时将自动添加该银行' : '',
          options: this.bankList,
          placeholder: '请选择',
          createNew: true
        },
        {
          label: '省市',
          type: 'selectCity',
          isRequired: true,
          selectType: 'city',
          separator: '-',
          width: '160px',
          placeholder: '请选择省-市',
          keyword: 'province'
        },
        {
          label: '支行',
          type: 'inputText',
          width: '160px',
          isRequired: true,
          keyword: 'subBank',
          maxlength: 50,
          placeholder: '请输入银行支行名称'
        }
      ];
    }
  },
  created() {
    if (this.isEdit && this.isCreate) {
      this.fillAccountInfo();
    }
    this.getBankList();
  },
  methods: {
    getTableData() {
      const list = _.cloneDeep(this.accountInfo);
      list.forEach(item => {
        item.province && (item.province = item.province.replace(/,/g, '-'));
      });
      return list;
    },
    backfillBank(name) {
      this.accountInfo[0].bank = name;
    },
    setTableData(list) {
      const accountInfo = _.cloneDeep(list);
      this.isEdit && accountInfo.forEach(item => {
        item.province && (item.province = item.province.replace(/-/g, ','));
      });
      this.accountInfo = accountInfo;
    },
    validateForm() {
      return new Promise((resolve, reject) => {
        this.$refs['dynamicEditTableRef'].validate().then(() => {
          resolve();
        }).catch(() => {
          reject();
        });
      });
    },
    setLogText(arr) {
      arr.forEach(i => {
        i._logText = `员工报销${this.logTextHeader}收款账户${i.payName}的收款账号`;
      });
      return arr;
    }
  }
};
</script>

<style lang="scss" scoped>
.account-container {
  position: relative;
  &::v-deep {
    .el-input__inner {
      width: 100%;
      text-overflow: ellipsis;
      padding-right: 30px;
    }
    .el-cascader--large {
      width: 100% !important;
    }
  }
}
.title-tip {
  font-size: 12px;
  color: #999;
  font-weight: normal;
  margin-left: 10px;
}
</style>
